﻿@using Smartstore.Web.Models.Catalog
@using Smartstore.Core.Catalog.Products

@model ProductDetailsModel

@{
    Assets.AppendTitleParts(Model.MetaTitle.HasValue() ? Model.MetaTitle : Model.Name);
    Assets.AppendMetaDescriptionParts(Model.MetaDescription);
    Assets.AppendMetaKeywordsParts(Model.MetaKeywords);

    if (Model.CanonicalUrl.HasValue())
    {
        Assets.AppendCanonicalUrlParts(Model.CanonicalUrl);
    }
    var shop = Model.Shop;
}

<partial name="MetaProperties" model="Model.MetaProperties" />

<div class="page product-details-page" itemscope itemtype="http://schema.org/Product">
    <zone name="productdetails_top" />
    
    <article class="pd page-body">

        <div id="main-update-container" class="update-container" data-url="@Model.UpdateUrl" data-id="@Model.Id">
            <form asp-route="Product" asp-route-SeName="@Model.SeName" method="post" id="pd-form">
                <!-- Top Content: Picture, Description, Attrs, Variants, Bundle Items, Price etc. -->
                <section class="row pd-section pd-section-top">
                    <!-- Picture -->
                    <div class="col-12 col-md-6 col-lg-4 pd-data-col" style="border-color: transparent;box-shadow: 0 calc(2px* 1) 16px -2px rgba(26, 33, 75, calc(1 * 0.12)), 0 calc(2px* 1) 3px -2px rgba(0,0,0, calc(1 * 0.15));">
                        <div class="pd-data-col-inner">
                            <zone name="productdetails_pictures_top" />

                            <div id="pd-gallery-container">
                                <partial name="Product.Media" model="Model.MediaGalleryModel" />
                            </div>

                            <zone name="productdetails_pictures_bottom" />
                        </div>
                    </div>

                    <!-- Sidebar: Info, Price, Buttons etc. -->
                    <aside class="col-12 col-md-6 col-lg-5 pd-info-col">
                        @* INFO: Don't add any line breaks here, because otherwise the empty selector in the zoom-window-container div won't work. *@
                        <div class="zoom-window-container"></div>

                        <zone name="productdetails_info_top" />

                        <partial name="Product.Info" model="Model" />

                        <div sm-if="Model.ProductType == ProductType.BundledProduct" class="pd-bundle-container pd-group card shadow-sm">
                            <partial name="Product.Bundle" model="Model" />
                        </div>

                        @if (Model.ProductType != ProductType.GroupedProduct)
                        {
                            <zone name="productdetails_attrs_top" />

                            <!-- Product attributes (SKU, EAN, Weight etc.) -->
                            <div class="pd-attrs-container" data-partial="Attrs">
                                <partial name="Product.Attrs" model="Model" />
                            </div>

                            <!-- Offer box -->
                            <partial name="Product.Offer" model="Model" />
                        }
                        else
                        {
                            <partial name="Product.Offer.Actions.Misc" model="Model" />
                        }

                        <!-- Available payment methods -->
                        <partial name="Product.AvailablePaymentMethods" />

                        <!-- social share -->
                        <div sm-if="Model.ProductShareCode.HasValue()" class="pd-share d-flex justify-content-@(Model.ProductType == ProductType.GroupedProduct ? "start mt-4" : "center mt-3")">
                            @Html.Raw(Model.ProductShareCode)
                        </div>

                   @*      @if (Model.DisplayAdminLink)
                        {
                            <a asp-action="Edit" asp-controller="Product" asp-area="admin" asp-route-id="@Model.Id" 
                               class="btn btn-secondary btn-flat btn-admin-edit" 
                               target="admin-product" 
                               rel="nofollow">
                                <i class="fa fa-cog"></i>
                                <span>@T("Common.Catalog.EditProduct")</span>
                            </a>
                        } *@

                    </aside>

                    <aside class="col-12 col-md-6 col-lg-3 pd-info-col" style="border-color: transparent;box-shadow: 0 calc(2px* 1) 16px -2px rgba(26, 33, 75, calc(1 * 0.12)), 0 calc(2px* 1) 3px -2px rgba(0,0,0, calc(1 * 0.15));">
                        <div style="width:255px; position:relative;background:#fff;height: 420px;list-style-type: none;text-align: center;margin:0 auto;">
                            <img src="@shop.LogoUrl" style="width:200px;height:auto;">
                            <li style="text-align: center;font-size:16px;"><span>@shop.Name</span></li>
                            <li style="text-align: center;"><img src="/images/banner/line_gray.png" style="width:220px;height:1px;"></li>
                            <div style="font-size:16px;margin-left:15px;margin-right:15px;">
                                <li style="text-align: center;margin-top:10px;"><img src="/images/banner/zhuanshuzhekou.png">&nbsp;<img src="/images/banner/shouhouwuyou.png">&nbsp;<img src="/images/banner/zhengzhiquanyi.png">&nbsp;<img src="/images/banner/zhuanshukefu.png"></li>
                                <li style="text-align: center;"><img src="/images/banner/line_gray.png" style="width:220px;height:1px;"></li>
                                <li style="text-align: left;margin-top:10px;"><span style="font-size:14px;">服务说明：</span></li>
                                <li style="text-align: left;">
                                    <span style="font-size:12px;">
                                        <p style="margin-bottom:0;">· 由国际医疗器械交易中心发货并提供售后服务</p>
                                        <p style="margin-bottom:0;">· 因库存实时变化，具体发货时间以实际发货为准</p>
                                    </span>
                                </li>
                                <li style="text-align: left;margin-top:10px;"><span style="font-size:14px;">售前说明：☎ 0527-88888577</span></li>
                            </div>
                        </div>
                    </aside>
                </section>

                <section sm-if="Model.ProductType == ProductType.GroupedProduct" class="pd-section pd-section-variants">
                    @if (Model.GroupedProduct?.Products?.Count > 0)
                    {
                        <div class="row mb-2 row-gap-2 align-items-center">
                            @if (Model.GroupedProduct.AssociatedProductsTitle.HasValue())
                            {
                                <div class="col-12 col-lg-6">
                                    <h3 class="pd-assoc-list-title mb-0">@Model.GroupedProduct.AssociatedProductsTitle</h3>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <partial name="Product.AssociatedProducts.Search" model="Model.GroupedProduct" />
                                </div>
                            }
                            else
                            {
                                <div class="col-12 col-lg-6 col-xxl-4">
                                    <partial name="Product.AssociatedProducts.Search" model="Model.GroupedProduct" />
                                </div>
                            }
                        </div>
                        <partial name="Product.AssociatedProducts" model="Model.GroupedProduct" />
                    }
                    else
                    {
                        <div class="pd-no-associated-products alert alert-warning">
                            @T("Products.NoAssociatedProducts")
                        </div>
                    }
                </section>
            </form>
        </div>

        <!-- Bottom Content: Full Description, Specification, Review etc. -->
        <section class="pd-section pd-section-bottom">
            <!-- Tabs -->
            <partial name="Product.Tabs" model="Model" />
            <zone name="productdetail_tabs_after" />

            <!-- Tags -->
            @if (Model.ShowProductTags)
            {
                <partial name="Product.Tags" model="Model.ProductTags" />
                <zone name="productdetail_tags_after" />
            }
            
            <!-- Related products -->
            <partial name="Product.RelatedProducts" model="Model.RelatedProducts" />
            <zone name="productdetail_related_products_after" />

            <!-- Products also purchased -->
            <partial name="Product.AlsoPurchased" model="Model.AlsoPurchased" />
            <zone name="productdetail_also_purchased_after" />
        </section>
    </article>

    @* TODO: (mc) find more intelligent way of rendering RecentlyViewedProducts globally *@
    @await Component.InvokeAsync("RecentlyViewedProducts")
    <zone name="productdetails_bottom" />
</div>

<script sm-target-zone="scripts" data-origin="product-detail">
    $(function () {
        var settings = {
            galleryStartIndex: @(Model.MediaGalleryModel.GalleryStartIndex),
            enableZoom: toBool('@(Model.MediaGalleryModel.ImageZoomEnabled)')
        };

    	$('#pd-form').productDetail(settings);
    });
</script>